<template>
  <div class="body1">
    <el-dialog title="开台" :visible.sync="dialogFormVisible" width="30%">
      <div class="kt1">
        <div>
          <span>房间号</span><input type="text" placeholder="请输入房间号" v-model="input1" @focus="inputa" />
        </div>
        <div>
          <span>服务人数</span
          ><input type="text" class="inp2" placeholder="请输入服务人数" v-model="input2" @focus="inputb"/>
        </div>
      </div>

      <div class="kt2">
        <div v-for="item in numdata" :key="item" @click="numclik(item)">{{item}}</div>
        
      </div>
      <div class="kt3">
        <div @click="dialogFormVisible1">取消</div>
        <div type="primary" @click="updateRoom">确定</div>
      </div>
    </el-dialog>

    <div class="left">
      <div class="top1">
        <div class="active">全部</div>
        <div>一楼</div>
        <div>二楼</div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="down1" >
          <div v-for="item in roomData.list" :key="item.id" class="dd1">
               <div class="d1-1" v-if="item.roomState == 0" >
          <span>{{ item.roomNum }} </span
          ><span> {{ item.numberofpeopleserved }}/2</span>
          <div></div>
        </div>
        <div class="d1-2" v-if="item.roomState == 1">
          <span>{{ item.roomNum }} </span
          ><span> {{ item.numberofpeopleserved }}/2</span>
          <div></div>
        </div>
        <div class="d1-3" v-if="item.roomState == 2">
          <span>{{ item.roomNum }} </span
          ><span> {{ item.numberofpeopleserved }}/2</span>
          <div></div>
        </div>
          </div>
   
      </div>
    </div>
    <div class="right">
      <div class="top2">
        <div @click="dialogFormVisible = true">开台</div>
        <div @click=" $router.push('/index/addproject')">点单</div>
        <div>转房间</div>
        <div>结算</div>
      </div>
      <div class="down2">
        <div class="d1">房间状态</div>
        <div class="d2">
          <div
            style="background-image: linear-gradient(0deg, #3393ff, #7fd9fb)"
          >
            <h4>全部</h4>
            <h4>（{{roomData.size}}）</h4>
          </div>
          <div
            style="background-image: linear-gradient(180deg, #b1e8dd, #30b8ae)"
          >
            <h4>空闲</h4>
            <h4>（{{free}}）</h4>
          </div>
          <div
            style="background-image: linear-gradient(180deg, #f7c19c, #e6795d)"
          >
            <h4>使用中</h4>
            <h4>（{{work}}）</h4>
          </div>
          <div
            style="background-image: linear-gradient(0deg, #a470d6, #d9aeec)"
          >
            <h4>清扫中</h4>
            <h4>（{{clean}}）</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '../../http/axios'
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState, mapMutations } = createNamespacedHelpers("room");

export default {
  data() {
    return {
      numdata:['7','8','9','C','4','5','6','0','1','2','3','.'],
      isover:true,
      istrue:1,
      input1:'',
      input2:'',
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        delivery: false,
      },
      formLabelWidth: "80px",
    };
  },
  mounted() {
    this.getAllroom();
  },
  computed: {
     
    ...mapState(["roomData",'work','free','clean']),
   
  },
  watch:{
    input2(){
     if(this.input2>2){
    this.$message.error('服务人数不能大于2哦！得加钱！');
    this.input2=''
      
     }
    }


  },
  methods: {
   
    ...mapActions(["getAllroom"]),
    inputa(){
        this.istrue=1
    },
    inputb(){
        this.istrue=0
    },
    numclik(item){
        if(this.istrue==1){
            this.input1+=item
        }else{
             this.input2+=item
        }
    },
    dialogFormVisible1(){
     this.dialogFormVisible=false
      this.input1=''
      this.input2=''
    },
   async updateRoom(){
     const data = await axios({
        url:'/roomManagement/setup',
        params:{
        roomNum:this.input1,
        numberofpeopleserved:this.input2-0
        }
    
       })
        this.dialogFormVisible=false
         this.getAllroom();
         this.$router.push({
                        path: '/index/addproject',
                        query: {
                            name: this.input1,
                            orderid:data.data.data.id
                        }
                    });


    },
    
    
  },
};
</script>

<style lang='scss' scoped>
/deep/.el-dialog__header {
  text-align: left;
  background-image: linear-gradient(90deg, #3393ff, #7fd9fb);
}
/deep/.el-dialog__title {
  color: white;
  font-size: 22px;
}
.active {
  background-image: linear-gradient(90deg, #f7c19c, #e6795d);
  color: white;
}
.body1 {
  width: 1024px;
  height: 624px;
  display: flex;
  .left {
    width: 75%;
    height: 624px;
    border-right: 1px solid #f0f0f0;

    .top1 {
      width: 100%;
      height: 52px;
      border-bottom: 1px solid #f0f0f0;
      box-shadow: #f0f0f0 0px 3px 30px 5px;
      display: flex;
      color: #727272;
      div {
        width: 130px;
        font-size: 18px;
        line-height: 52px;
      }
    }
    .down1 {
      width: 100%;
      height: 351px;
      display: flex;
      flex-wrap: wrap;
     flex-direction: row;
     margin-left: 0px;
      .d1-1 {
        background: url("../../assets/leisure.png");
        background-size: 100% 100%;
        span {
          display: inline-block;
          width: 45px;
          margin-right: 10px;
          margin-top: 60px;
          color: white;
        }
      }

      .d1-2 {
        background: url("../../assets/youren.png");
        background-size: 100% 100%;
         span {
          display: inline-block;
          width: 45px;
          margin-right: 10px;
          margin-top: 60px;
          color: white;
        }
      }
      .d1-3 {
        background: url("../../assets/claen.png");
        background-size: 100% 100%;
         span {
          display: inline-block;
          width: 45px;
          margin-right: 10px;
          margin-top: 60px;
          color: white;
        }
      }
      .dd1{
          margin-left: 15px;
      }
      div>div {
        margin-top: 35px;
        width: 110px;
        height: 82px;
       margin-right: 10px;
       
        border: 1px solid white;
        border-radius: 15px;
      }
    }
  }

  .right {
    width: 25%;
    height: 624px;
    box-shadow: #f0f0f0 -3px 0px 30px 5px;
    .top2 {
      width: 100%;
      height: 26 0px;

      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      div {
        width: 90px;
        height: 90px;
        background-image: linear-gradient(0deg, #3393ff, #7fd9fb);

        border-radius: 10px;
        margin-top: 20px;
        color: white;
        font-size: 20px;
        line-height: 90px;
      }
    }
    .down2 {
      width: 100%;
      height: 364px;

      .d1 {
        width: 100%;
        height: 45px;
        background-color: #fcfcff;
        font-size: 23px;
        font-weight: 500;
        line-height: 45px;
        border-left: 5px solid #2889ff;
      }
      .d2 {
        width: 100%;
        height: 240px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        div {
          width: 90px;
          height: 90px;

          border-radius: 10px;
          margin-top: 40px;
          color: white;
          font-size: 20px;
          h4 {
            margin-top: 25px;
            line-height: 10px;
          }
        }
      }
    }
  }
}
.kt1 {
  width: 400px;
  height: 100px;
  div {
    line-height: 50px;
    margin: 0 auto;
    span {
      margin-right: 20px;
      font-size: 20px;
      color: #298bff;
    }
    input {
      margin-left: 20px;
      width: 250px;
      height: 30px;
      border: 1px solid #eeeeee;
      border-radius: 5px;
      font-size: 20px;
    }
    .inp2 {
      margin-left: 0px;
    }
  }
}
.kt2 {
  width: 300px;
  height: 240px;
  margin: 0 auto;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  div {
    width: 62px;
    height: 62px;

    line-height: 60px;
    border-radius: 10px;
    background-image: linear-gradient(0deg, #f9f0e4, #f5e4d0);
    font-size: 25px;
    font-weight: 500;
  }
}
.kt3 {
  width: 300px;
  height: 60px;
  margin: 0 auto;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  div {
    width: 138px;
    height: 55px;
    margin-top: -10px;
    line-height: 55px;
    border-radius: 10px;
    background-image: linear-gradient(0deg, #f9f0e4, #f5e4d0);
    font-size: 25px;
    font-weight: 500;
  }
}
</style>